<template>
    <div class="shop_header">
        <swiper autoplay circular class="shop_swiper">
            <swiper-item>3</swiper-item>
            <swiper-item>2</swiper-item>
            <swiper-item>2</swiper-item>
        </swiper>
        <div class="shop_divs">
            <div class="shop_divs_span">
                <span class="divs_title1"></span>
                <span class="divs_title2">安利康师</span>
            </div>
            <div class="shop_divs_span">
                <span class="divs_title1"></span>
                <span class="divs_title2">安利康傅</span>
            </div>
            <div class="shop_divs_span">
                <span class="divs_title1"></span>
                <span class="divs_title2">阿里山鹃</span>
            </div>
            <div class="shop_divs_span">
                <span class="divs_title1"></span>
                <span class="divs_title2">案列师范</span>
            </div>
            <div class="shop_divs_span">
                <span class="divs_title1"></span>
                <span class="divs_title2">抛勿萨德</span>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				title: 'shop'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scopes>
    .shop_header{
        position: relative;
    }
    .shop_swiper{
        width: 100%;
        height: 500rpx;
        border-bottom: 1rpx solid #ccc;
    }swiper-item:nth-child(1){
        background: rebeccapurple;
    }swiper-item:nth-child(2){
        background: darkcyan;
    }swiper-item:nth-child(3){
        background: salmon;
    }
    .shop_divs{
        width: 95%;
        height: 120px;
        bottom: -60px;
        display: flex;
        margin-left: 2.5%;
        position: absolute;
        border-radius: 10px;
        align-items: center;
        background-color: white;
        justify-content: space-around;
        box-shadow: 0px 0px 2px 0px #ccc;
    }
    .shop_divs_span{
        width: 70px; 
        height: 80px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .divs_title1{
        width: 40px;
        height: 40px; 
        display: inline-block;
        background-color: burlywood;
    }
</style>
